<template>
	<view class="page">
		<view class="top">
			<!-- <uni-easyinput prefixIcon="search" v-model="title" placeholder="搜索商品标题"
				@clear="goSearch('')"></uni-easyinput>
			<text class="tit" @click="goSearch('')">搜索</text> -->
			<uni-search-bar @confirm="goSearch" placeholder="搜索您想要的商品" bgColor="#fff" v-model="title" @clear="goSearch('')" cancelButton="none">
			</uni-search-bar>
		</view>
		<!-- <view class="history" v-show="isShow&&historyList.length>0">
			<view class="h_top">
				<view>历史记录</view>
				<view class="h_blue" @click="clearHistory">清空历史记录</view>
			</view>
			<view class="h_list">
				<view class="h_item" v-for="item in historyList" @click="goSearch(item.content)">{{item.content}}</view>
			</view>
		</view> -->
		<!-- <scroll-view class="type" scroll-x="true" v-if="isShowType">
			<view class="t_item" :class="{'t_active':bigcate==2}" @click="changebigCate(2)">抖音</view>
			<view class="t_item" :class="{'t_active':bigcate==1}" @click="changebigCate(1)">拼多多</view>
		</scroll-view> -->
		<taobaoList style="margin-top: 20rpx;" :list="goodsList" :type="bigcate"
			:isloading="isloading" :isempty="isempty"></taobaoList>
	</view>
</template>

<script>
	import taobaoList from "@/components/taobaoList.vue"
	export default {
		components: {
			taobaoList
		},
		data() {
			return {
				isloading: false,
				isempty: false,
				bigcate: 2,
				category: '',
				title: "",
				page: 0,
				cateList: [],
				goodsList: [],
				isShow: true,
				isShowType: false,
				historyList: []
			};
		},
		onLoad(option) {
			if (option.category) {
				this.category = option.category;
				this.isShow = false;
				this.isShowType = true;
				this.getList();
			}
			// this.getList();
			// uni.getClipboardData({
			// 	success: function(res) {}
			// });
			// this.getHistory();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			goSearch(val) {
				if (val.value) {
					this.title = val.value;
				}else{
					this.title = val;
				}
				this.page = 0;
				this.goodsList = [];
				this.getList();
			},
			changebigCate(id) {
				if (this.bigcate == id) return;
				this.bigcate = id;
				this.page = 0;
				this.goodsList = [];
				this.getList();
			},
			getList() {
				this.isShow = false;
				this.isShowType = true;
				this.isempty = false;
				this.isloading = true;
				this.page++;
				let php = '';
				let obj = {};
				if (this.bigcate == 1) {
					php = "duoduo";
					obj = {
						page: this.page,
						cid: '',
						keyword: this.keywords
					}

				} else if (this.bigcate == 2) {
					php = "douyin";
					obj = {
						page: this.page,
						title: this.title,
						category: this.category
					}
				}
				this.$axios('Goods/search', 'POST', php, obj).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.goodsList = [...this.goodsList, ...res.data.data.goods.list];
						this.isempty = res.data.data.goods.list.length <= 0;
					}
				})
			},
			getHistory() {
				let php = '';
				if (this.bigcate == 1) {
					php = "duoduo";

				} else if (this.bigcate == 2) {
					php = "douyin";
				}
				this.$axios('index/recentlyQuery', 'POST', php).then(res => {
					if (res.data.code == 200) {
						this.historyList = res.data.data;
					}
				})
			},
			clearHistory() {
				let php = '';
				if (this.bigcate == 1) {
					php = "duoduo";

				} else if (this.bigcate == 2) {
					php = "douyin";
				}
				this.$axios('index/recentlyDel', 'POST', php).then(res => {
					if (res.data.code == 200) {
						this.historyList = [];
						this.isShow = false;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8fe;
		padding-bottom: 60rpx;
	}

	.top {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx 0;
		position: fixed;
		width: 100%;
		background: #f8f8fe;
		z-index: 2;
		top: 0;
		.tit {
			font-size: 32rpx;
			font-weight: bold;
			margin-left: 30rpx;
		}
		.uni-searchbar{
			width: 710rpx;
			padding: 0;
		}
	}

	.history {
		padding: 0 20rpx;
		margin-top: 26rpx;

		.h_top {
			display: flex;
			justify-content: space-between;

			.h_blue {
				color: #4e9ffc;
			}
		}

		.h_list {
			margin-top: 14rpx;

			.h_item {
				border: 1rpx solid #dee1e4;
				padding: 5rpx 16rpx;
				border-radius: 30rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				display: inline-block;
				font-size: 24rpx;
				color: #1f1f1f;
			}
		}
	}

	.type {
		white-space: nowrap;
		padding: 35rpx 0 25rpx;
		color: #646464;

		.t_item {
			display: inline-block;
			padding: 0 20rpx;
			font-size: 30rpx;
		}

		.t_active {
			color: #141414;
			font-weight: bold;
			font-size: 32rpx;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				width: 50rpx;
				height: 10rpx;
				background: linear-gradient($bg-color, #fff);
				display: block;
				position: absolute;
				z-index: 2;
				left: 50%;
				right: 50%;
				margin-left: -25rpx;
				bottom: 0;
			}
		}
	}
</style>